import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { Link, useParams } from 'react-router-dom'
import * as profileActionCreators from '../store/actionCreators/profile'

const ProfileSetting = function (props) {
  if (!props.isUser) return null
  return (
    <Link
      to="/settings"
      className="btn btn-sm btn-outline-secondary action-btn">
      <i className="ion-gear-a"></i> Edit Profile Settings
    </Link>
  )
}

const FollowButton = function (props) {
  if (props.isUser) return null

  let classes = 'btn btn-sm action-btn';
  if (props.profile.following) {
    classes += ' btn-secondary';
  } else {
    classes += ' btn-outline-secondary';
  }

  return (
    <button

      className={classes}>
      <i className="ion-plus-round"></i>
      &nbsp;
      {props.profile.following ? 'Unfollow' : 'Follow'} {props.profile.username}
    </button>
  );
}

function Profile(props) {
  const { getProfile, profile, user} = props
  const { username } = useParams()
  const isUser = user && user.username === profile.username
  useEffect(() => {
    getProfile(username)
  }, [])


  return (
    <div className="profile-page">

      <div className="user-info">
        <div className="container">
          <div className="row">

            <div className="col-xs-12 col-md-10 offset-md-1">
              <img src={profile.image || 'https://i.imgur.com/Qr71crq.jpg'} className="user-img" />
              <h4>{profile.username || ''}</h4>
              <p>
               {profile.bio || ''}
              </p>
              <ProfileSetting isUser={isUser} profile={profile}/>
              <FollowButton isUser={isUser} profile={profile}/>
            </div>

          </div>
        </div>
      </div>

      {/* <div className="container">
        <div className="row">

          <div className="col-xs-12 col-md-10 offset-md-1">
            <div className="articles-toggle">
              <ul className="nav nav-pills outline-active">
                <li className="nav-item">
                  <a className="nav-link active" href="">My Articles</a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="">Favorited Articles</a>
                </li>
              </ul>
            </div>

            <div className="article-preview">
              <div className="article-meta">
                <a href=""><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
                <div className="info">
                  <a href="" className="author">Eric Simons</a>
                  <span className="date">January 20th</span>
                </div>
                <button className="btn btn-outline-primary btn-sm pull-xs-right">
                  <i className="ion-heart"></i> 29
                </button>
              </div>
              <a href="" className="preview-link">
                <h1>How to build webapps that scale</h1>
                <p>This is the description for the post.</p>
                <span>Read more...</span>
              </a>
            </div>

            <div className="article-preview">
              <div className="article-meta">
                <a href=""><img src="http://i.imgur.com/N4VcUeJ.jpg" /></a>
                <div className="info">
                  <a href="" className="author">Albert Pai</a>
                  <span className="date">January 20th</span>
                </div>
                <button className="btn btn-outline-primary btn-sm pull-xs-right">
                  <i className="ion-heart"></i> 32
                </button>
              </div>
              <a href="" className="preview-link">
                <h1>The song you won't ever stop singing. No matter how hard you try.</h1>
                <p>This is the description for the post.</p>
                <span>Read more...</span>
                <ul className="tag-list">
                  <li className="tag-default tag-pill tag-outline">Music</li>
                  <li className="tag-default tag-pill tag-outline">Song</li>
                </ul>
              </a>
            </div>

          </div>

        </div>
      </div> */}

    </div>
  )
}

const mapStateToProps = state => ({
	profile: state.profile.profile || {},
	user: state.user.user || {}
})

const mapDispatchToProps = dispatch => ({
	getProfile: username => {
    dispatch(profileActionCreators.getProfile(username))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Profile);